<template>
    <el-select ref="select" placeholder="请输入关键词搜索"
      v-model="selectedValue" filterable remote clearable
      :remote-method="remoteMethod" :loading="loading"
      style="width:60%"
      @change="onChange">
      <el-option v-for="option in options" :label="option.label" :key="option.value" :value="option.value">{{option.label}}</el-option>
    </el-select>
</template>
<script>
import axios from 'axios'
import store from '@/store'
import { getToken } from '@/utils/auth'
export default {
  props: {
    // disabled: Boolean,
    url: String,
    queryParamers: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      selectedValue: '',
      loading: false,
      options: [],
    //   disabled: false,
    }
  },
  methods: {
    changeName (val) {
      this.setQuery(val)
    },
    clear () {
      this.selectedValue=''
    },
    setQuery (val) {
      this.$refs['select'].setQuery(val)
    },
    remoteMethod (query) {
    //   console.log("OptionData", this.queryParamers)
      if (query === '') {
        this.options = []
        return
      }
      this.loading = true
      const data = {
        searchName: query
      }
      for (let key in this.queryParamers) {
        data[key] = this.queryParamers[key]
      }
      axios.request(
        {
          url: process.env.VUE_APP_BASE_API + this.url,
          data,
          method: 'post',
          headers: {
            'marketId': store.state.app.marketId,
            'Authorization': getToken()
          }
        }
      ).then(res => {
        let data = res.data.data 
        // console.log(data)
        let items = []
          for (let item of data) {
           
            items.push({
              value: item.id + '',
              label: item.name,
              stallName: item.stallName,
              businessOpenId: item.businessOpenId,
              exData: item,
              // isBind: !item.isBind
            })
          }
        this.options = items
        this.loading = false
      }).catch(_ => {
        this.loading = false
        this.options = []
      })
    },
    onChange () {
      for (let i = 0; i < this.options.length; i++) {
        if (this.options[i].value === this.selectedValue) {
          this.$emit('selected', this.options[i])
          break
        }
      }
    }
  }
}
</script>
// <style lang="scss" scoped>
// width
</style>
